<!-- Add "scoped" attribute to limit CSS to this component only -->
import { clearInterval } from 'timers';
import { setInterval } from 'timers';
<style lang="less">
@import '../assets/styles/common/lib-mixins.less';
@import '../assets/styles/common/common.less';


.welcome-img{
    display: block;
    margin: 111px auto 0;
    width: 135px;
    height: 135px;
    border-radius: 9999px;  
  }

  .logo-tit{
    margin-top: 48px;
    text-align: center;
    .px2px(font-size, 45PX);
  }

  .login-tab{
    margin-top: 70px;

    &.mag-tp80{
      margin-top: 80px;
    }

    .login-inp-wrap{
      position: relative;
      margin: 20px auto 0;
      width: 670px;
      height: 70px;
      padding-bottom: 10px;
      border: none;
      border-bottom: 1PX solid #CECECE;
      .flex-base();

      // &.has-btn{
      //   .inp-comm{
      //     // padding-right: 220px;
      //   }
      // }

      .login-label{
        flex: 0 0 100px;
        .px2px(font-size, 30PX);
        height: 70px;
        line-height: 70px;
        color: #F0AF05;
      }

      .inp-comm{
        flex: 1 1 auto;
        position: relative;
        z-index: 1;
        height: 70px;
        line-height: 70px;
        box-sizing: border-box;
        color: #000;
        .px2px(font-size, 30PX);
        border: none;
        outline: none;
        background-color: transparent;
      }

      .sms-btn{
        flex: 0 0 200px;
        // position: absolute;
        // z-index: 10;
        // top: 0;
        // right: 0;
        width: 200px;
        height: 70px;
        line-height: 70px;
        .px2px(font-size, 26PX);
        color: #fff;
        background-color: #8E8E8E;
        border: 1PX solid #726f6c;
        border-radius: 5px;
      }
    }
  }

  .login-btn{
    display: block;
    margin: 55px auto 0;
    width: 670px;
    height: 88px;
    line-height: 88px;
    text-align: center;
    .px2px(font-size, 28PX);
    color: #000;
    background-color: #FFDA44;
    border-radius: 9999px;
    cursor: pointer;
  }
</style>
<template>
  <div class="container">
      <div class="login-body">
        <img class="welcome-img" src="../assets/images/icons/logo-icon.jpg" />
        <p class="logo-tit">邻客充电桩</p>
        <div class="login-tab">
          <div class="login-inp-wrap">
            <label class="login-label">手机号</label>
            <input type="number" class="inp-comm" placeholder="请输入手机号" v-model="mobileNo" @blur="inputBlur" />
          </div>
        </div>
        <div class="login-tab mag-tp80">
          <div class="login-inp-wrap has-btn">
            <label class="login-label">验证码</label>
            <input type="number" class="inp-comm" placeholder="请输入验证码" v-model="smsCode" @blur="inputBlur" />
            <button class="sms-btn" @click="sendSms" :disabled="isCount">{{smsStr}}</button>
          </div>
        </div>
        <button class="login-btn" @click="register">立即注册</button>
      </div>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import BW from '../assets/scripts/common/bwCommon'
export default {
  components: {
  },
  data() {
    return {
      mobileNo: '',   // 手机号
      smsCode: '',   // 短信验证码
      smsStr: '获取验证码',   // 验证码文案
      smsCount: 60,   // 倒计时数字
      isCount: false,   // 是否正在倒计时
      smsTimer: 0      // 验证码计时器
    }
  },
  computed: { // computed计算属性
    // 将store中的getUsrInfo映射到局部计算属性
    ...mapGetters(['getUsrInfo'])
  },
  methods: {
    // 在组件中提交Mutation
    ...mapMutations(['setUsrInfo']),
    inputBlur () {
      // window.scroll(0, 0);
      setTimeout(() => {
        // alert(1);
        if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
          return;
        }
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { // 判断iPhone|iPad|iPod|iOS
          this.valRes = 'ios';
        } else if (/(Android)/i.test(navigator.userAgent)) { // 判断Android
          this.valRes = 'android';
        }
        if (this.valRes === 'ios') {
          document.activeElement.scrollIntoViewIfNeeded(true);
        }
      }, 10);
    },
    async sendSms() {     // 发送短信验证码
      console.log('sendSms')
      if (this.mobileNo === '') {
        BW.Toast('请输入手机号')
        return
      }
      await this.request('getSms', {mobileNo: this.mobileNo})
      this.smsCount = 60
      this.$store.commit('updateLoadingStatus', false)
      this.smsStr = '重新获取:' + this.smsCount + 's'
      this.isCount = true
      this.smsTimer = setInterval(() => {
        if (this.smsCount > 1) {
          this.smsCount -= 1
          this.smsStr = '重新获取:' + this.smsCount + 's'
        } else {
          clearInterval(this.smsTimer)
          this.isCount = false
          this.smsCount = 60
          this.smsStr = '获取验证码'
        }
      }, 1000)
    },
    async register() {     // 登录
      if (this.mobileNo === '') {
        BW.Toast('请输入手机号')
        return
      }

      if (this.smsCode === '') {
        BW.Toast('请输入验证码')
        return
      }

      await this.request('register', {mobileNo: this.mobileNo, smsCode: this.smsCode})
      this.$store.commit('updateLoadingStatus', false)
      let usrInfo = this.getUsrInfo
      let nowInfo = {registed: true, mobileNo: this.mobileNo}
      if (usrInfo === null || typeof (usrInfo) === 'undefined') {
        usrInfo = nowInfo
      } else {
        Object.assign(usrInfo, nowInfo)
      }
      this.setUsrInfo(usrInfo)
      this.$router.push({name: 'index'})
    }
  }
}
</script>
